<div class="grid">
	<div class="col-12 md:col-6">
		<div class="card">
			<h5>Default</h5>
			<div class="flex flex-wrap gap-2">
				<button pButton pRipple label="Submit"></button>
				<button pButton pRipple label="Disabled" disabled="true"></button>
				<p-button label="Link" styleClass="p-button-link"></p-button>
			</div>
		</div>

		<div class="card">
			<h5>Severities</h5>
			<div class="flex flex-wrap gap-2">
				<button pButton pRipple type="button" label="Primary"></button>
				<button pButton pRipple type="button" label="Secondary" class="p-button-secondary"></button>
				<button pButton pRipple type="button" label="Success" class="p-button-success"></button>
				<button pButton pRipple type="button" label="Info" class="p-button-info"></button>
				<button pButton pRipple type="button" label="Warning" class="p-button-warning"></button>
				<button pButton pRipple type="button" label="Help" class="p-button-help"></button>
				<button pButton pRipple type="button" label="Danger" class="p-button-danger"></button>
			</div>
		</div>

		<div class="card">
			<h5>Text</h5>
			<div class="flex flex-wrap gap-2">
				<button pButton pRipple type="button" label="Primary" class="p-button-text"></button>
				<button pButton pRipple type="button" label="Secondary" class="p-button-secondary p-button-text"></button>
				<button pButton pRipple type="button" label="Success" class="p-button-success p-button-text"></button>
				<button pButton pRipple type="button" label="Info" class="p-button-info p-button-text"></button>
				<button pButton pRipple type="button" label="Warning" class="p-button-warning p-button-text"></button>
				<button pButton pRipple type="button" label="Help" class="p-button-help p-button-text"></button>
				<button pButton pRipple type="button" label="Danger" class="p-button-danger p-button-text"></button>
				<button pButton pRipple type="button" label="Plain" class="p-button-text p-button-plain"></button>
			</div>
		</div>

		<div class="card">
			<h5>Outlined</h5>
			<div class="flex flex-wrap gap-2">
				<button pButton pRipple type="button" label="Primary" class="p-button-outlined"></button>
				<button pButton pRipple type="button" label="Secondary" class="p-button-outlined p-button-secondary"></button>
				<button pButton pRipple type="button" label="Success" class="p-button-outlined p-button-success"></button>
				<button pButton pRipple type="button" label="Info" class="p-button-outlined p-button-info"></button>
				<button pButton pRipple type="button" label="Warning" class="p-button-outlined p-button-warning"></button>
				<button pButton pRipple type="button" label="Help" class="p-button-outlined p-button-help"></button>
				<button pButton pRipple type="button" label="Danger" class="p-button-outlined p-button-danger"></button>
			</div>
		</div>

		<div class="card">
			<h5>Button Set</h5>
			<span class="p-buttonset">
				<button pButton pRipple label="Save" icon="pi pi-check"></button>
				<button pButton pRipple label="Delete" icon="pi pi-trash"></button>
			</span>
		</div>

		<div class="card">
			<h5>SplitButton</h5>
			<div class="flex flex-wrap gap-2">
				<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-info"></p-splitButton>
				<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-success"></p-splitButton>
				<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-warning"></p-splitButton>
				<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-help"></p-splitButton>
				<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-danger"></p-splitButton>
			</div>
		</div>
		<div class="card">
			<h5>Templating</h5>
			<div class="flex flex-wrap gap-2">
				<p-button>
					<img alt="logo" src="https://primefaces.org/cdn/primeng/images/primeng-icon.svg" style="width: 1.5rem"/>
				</p-button>
	
				<p-button styleClass="p-button-outlined">
					<img alt="logo" src="https://primefaces.org/cdn/primeng/images/primeng-icon.svg" style="width: 1.5rem"/>
					<span class="ml-2 font-bold">PrimeNG</span>
				</p-button>
			</div>
		</div>
	</div>
	<div class="col-12 md:col-6">
		<div class="card">
			<h5>Icons</h5>
			<div class="flex flex-wrap gap-2">
				<button pButton pRipple icon="pi pi-star-fill"></button>
				<button pButton pRipple label="Submit" icon="pi pi-bookmark"></button>
				<button pButton pRipple label="Submit" icon="pi pi-bookmark" iconPos="right"></button>
			</div>
		</div>

		<div class="card">
			<h5>Raised</h5>
			<div class="flex flex-wrap gap-2">
				<button pButton pRipple type="button" label="Primary" class="p-button-raised"></button>
				<button pButton pRipple type="button" label="Secondary" class="p-button-raised p-button-secondary"></button>
				<button pButton pRipple type="button" label="Success" class="p-button-raised p-button-success"></button>
				<button pButton pRipple type="button" label="Info" class="p-button-raised p-button-info"></button>
				<button pButton pRipple type="button" label="Warning" class="p-button-raised p-button-warning"></button>
				<button pButton pRipple type="button" label="Help" class="p-button-raised p-button-help"></button>
				<button pButton pRipple type="button" label="Danger" class="p-button-raised p-button-danger"></button>
			</div>
		</div>

		<div class="card">
			<h5>Rounded</h5>
			<div class="flex flex-wrap gap-2">
				<button pButton pRipple type="button" label="Primary" class="p-button-rounded"></button>
				<button pButton pRipple type="button" label="Secondary" class="p-button-rounded p-button-secondary"></button>
				<button pButton pRipple type="button" label="Success" class="p-button-rounded p-button-success"></button>
				<button pButton pRipple type="button" label="Info" class="p-button-rounded p-button-info"></button>
				<button pButton pRipple type="button" label="Warning" class="p-button-rounded p-button-warning"></button>
				<button pButton pRipple type="button" label="Help" class="p-button-rounded p-button-help"></button>
				<button pButton pRipple type="button" label="Danger" class="p-button-rounded p-button-danger"></button>
			</div>
		</div>

		<div class="card">
			<h5>Rounded Icons</h5>
			<div class="flex flex-wrap gap-2">
				<button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded"></button>
				<button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary"></button>
				<button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success"></button>
				<button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info"></button>
				<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning"></button>
				<button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help"></button>
				<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger"></button>
			</div>
		</div>

		<div class="card">
			<h5>Rounded Text</h5>
			<div class="flex flex-wrap gap-2">
				<button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded p-button-text"></button>
				<button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text"></button>
				<button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-button-text"></button>
				<button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info p-button-text"></button>
				<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text"></button>
				<button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text"></button>
				<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text"></button>
				<button pButton pRipple type="button" icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain"></button>
			</div>
		</div>
		
		<div class="card">
			<h5>Rounded Outlined</h5>
			<div class="flex flex-wrap gap-2">
				<button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded p-button-outlined"></button>
				<button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined"></button>
				<button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined"></button>
				<button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined"></button>
				<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined"></button>
				<button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined"></button>
				<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined"></button>
			</div>
		</div>

		<div class="card">
			<h5>Loading</h5>
			<div class="flex flex-wrap gap-2">
				<p-button label="Search" icon="pi pi-search" [loading]="loading[0]" (onClick)="load(0)"></p-button>
				<p-button label="Search" icon="pi pi-search" iconPos="right" [loading]="loading[1]" (onClick)="load(1)"></p-button>
				<p-button icon="pi pi-search" [loading]="loading[2]" (onClick)="load(2)"></p-button>
				<p-button label="Search" [loading]="loading[3]" (onClick)="load(3)"></p-button>
			</div>
		</div>
	</div>
</div>